<template>
  <div class="app-container">
     <el-tabs v-model="activeName" @tab-click="handleClick" stretch >
    <el-tab-pane label="药品总库存" name="first" >
      <!--查询条件开始-->
      <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
      <el-form-item label="药品名称" prop="medicinesName">
        <el-input
          v-model="queryParams.medicinesName"
          placeholder="请输入药品名称"
          clearable
          size="small"
          style="width:180px"
        />
      </el-form-item>
      <el-form-item label="关键字" prop="keywords">
        <el-input
          v-model="queryParams.keywords"
          placeholder="请输入关键字"
          clearable
          size="small"
          style="width:180px"
        />
      </el-form-item>
      <el-form-item label="药品类型" prop="medicinesType">
        <el-select
          v-model="queryParams.medicinesType"
          placeholder="药品类型"
          clearable
          size="small"
          style="width:180px"
        >
          <el-option
            v-for="dict in medicinesTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="生产厂家" prop="producterId">
        <el-select
          v-model="queryParams.producterId"
          placeholder="生产厂家"
          clearable
          size="small"
          style="width:180px"
        >
          <el-option
            v-for="dict in producterOptions"
            :key="dict.producterId"
            :label="dict.producterName"
            :value="dict.producterId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="处方类型" prop="prescriptionType">
        <el-select
          v-model="queryParams.prescriptionType"
          placeholder="处方类型"
          clearable
          size="small"
          style="width:180px"
        >
          <el-option
            v-for="dict in prescriptionTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
      <!--查询条件结束-->

      <!--数据表格开始--> 
       <el-table v-loading="loading" border :data="medicinesTableList" >
      <el-table-column label="药品ID" align="center" prop="medicinesId" />
      <el-table-column label="药品名称" align="center" prop="medicinesName" />
      <el-table-column label="库存量" width="280px" align="center" prop="medicinesStockNum"  />
      <el-table-column label="预警值" width="280px" align="center" prop="medicinesStockDangerNum"  />
      <el-table-column label="生产厂家" width="280px" align="center" prop="producterId" :formatter="producterFormatter" />
      <el-table-column label="药品类型" align="center" prop="medicinesType" :formatter="medicinesTypeFormatter" />
      <el-table-column label="处方类型" align="center" prop="prescriptionType" :formatter="prescriptionTypeFormatter" />
      <el-table-column label="单位" align="center" prop="unit" />
      <el-table-column label="换算量" align="center" prop="conversion" />
     
    </el-table>
      <!--数据表格结束-->

<!-- 分页控件开始 -->
    <el-pagination
      v-show="total>0"
      :current-page="queryParams.pageNum"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 分页控件结束 -->









    </el-tab-pane>
    <el-tab-pane label="批次库存及价格" name="second">
  <!--查询条件开始-->
      <el-form ref="queryForm" :model="queryParamsI" :inline="true" label-width="68px">
      <el-form-item label="药品名称" prop="medicinesName">
        <el-input
          v-model="queryParamsI.medicinesName"
          placeholder="请输入药品名称"
          clearable
          size="small"
          style="width:180px"
        />
      </el-form-item>
      <el-form-item label="单据ID" prop="purchaseId">
        <el-input
          v-model="queryParamsI.purchaseId"
          placeholder="请输入单据ID"
          clearable
          size="small"
          style="width:180px"
        />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width:240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholde="开始日期"
          end-placeholde="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
      <!--查询条件结束-->

      <!--数据表格开始--> 
       <el-table v-loading="loading" border :data="inventoryTableList" >
      <el-table-column label="药品ID" align="center" prop="medicinesId" />
      <el-table-column label="药品名称" align="center" prop="medicinesName" />
      <el-table-column label="采购量"  align="center" prop="inventoryLogNum"  />
      <el-table-column label="批发价"  align="center" prop="tradePrice"  />
      <el-table-column label="批发额"  align="center" prop="tradeTotalAmount"  />
      <el-table-column label="批次号" align="center" prop="batchNumber"  />
      <el-table-column label="生产厂家" align="center" width="280px" prop="producterId" :formatter="producterFormatter"  />
      <el-table-column label="药品类型" align="center" prop="medicinesType" :formatter="medicinesTypeFormatter"  />
      <el-table-column label="处方类型" align="center" prop="prescriptionType" :formatter="prescriptionTypeFormatter" />
      <el-table-column label="创建时间" align="center" width="280px" prop="createTime" />
    </el-table>
      <!--数据表格结束-->

<!-- 分页控件开始 -->
    <el-pagination
      v-show="totalI>0"
      :current-page="queryParamsI.pageNum"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="queryParamsI.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalI"
      @size-change="handleSizeChangeI"
      @current-change="handleCurrentChangeI"
    />
    <!-- 分页控件结束 -->


    </el-tab-pane>
    
  </el-tabs>

  </div>
</template>
<script>

import { selectAllProducter } from '@/api/erp/producter'
import { listMedicinesForPage, addMedicines, updateMedicines, getMedicinesById, deleteMedicinesByIds, updateMedicinesStorage } from '@/api/erp/medicines'
import {listInventoryLogForPage} from '@/api/erp/inventory'
export default {
  data() {
      return {
      activeName: 'first',
      // 是否启用遮罩层
      loading: false,
      // 分页数据总条数
      total: 0,
      //药品表格数据
      medicinesTableList: [],
       //批次表格数据表格数据
      inventoryTableList: [],
      // 药品类型数据值集
      medicinesTypeOptions: [],
      // 生产厂家数据
      producterOptions: [],
      // 处方类型数值集
      prescriptionTypeOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        medicinesName: undefined,
        medicinesType: undefined,
        prescriptionType: undefined,
        producterId: undefined,
        status: undefined,
        keywords: undefined
      },
       // 查询参数
      queryParamsI: {
        pageNum: 1,
        pageSize: 10,
        medicinesName: undefined,
        purchaseId: undefined,
      },
      // 时间
      dateRange:[],
      totalI:0
     
        
      };
    },
    created(){
    
    // 查询药品分类值集数据
    this.getDataByType('his_medicines_type').then(res => {
      this.medicinesTypeOptions = res.data
    })
    // 查询药品处方分类值集数据
    this.getDataByType('his_prescription_type').then(res => {
      this.prescriptionTypeOptions = res.data
    })
    // 查询所有可用的生产厂家
    selectAllProducter().then(res => {
      this.producterOptions = res.data
    })
    // 查询表格数据
    this.getMedicinesList()
    this.getlistInventoryLogForPage()

    },
    methods: {
      handleClick(tab, event) {
       
      },
       // 查询表格数据
    getMedicinesList() {
      this.loading = true // 打开遮罩
      listMedicinesForPage(this.queryParams).then(res => {
        this.medicinesTableList = res.data
        this.total = res.total
        this.loading = false// 关闭遮罩
      }).catch(error =>{
          this.msgError("服务器异常,请联系管理员")
         this.loading = false// 关闭遮罩
      })
      
    },
     getlistInventoryLogForPage() {
      this.loading = true // 打开遮罩
      listInventoryLogForPage(this.addDateRange(this.queryParamsI,this.dateRange)).then(res => {
        this.inventoryTableList = res.data
        this.totalI = res.total
        this.loading = false// 关闭遮罩
      })
    },
    // 条件查询
    handleQuery() {
      this.getMedicinesList()
    },
    // 重置查询条件
    resetQuery() {
      this.resetForm('queryForm')
      this.getMedicinesList()
    },
     // 分页pageSize变化时触发
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      // 重新查询
      this.getMedicinesList()
    },
    // 点击上一页  下一页，跳转到哪一页面时触发
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      // 重新查询
      this.getMedicinesList()
    },
        // 分页pageSize变化时触发
    handleSizeChangeI(val) {
      this.queryParamsI.pageSize = val
      // 重新查询
      this.getlistInventoryLogForPage()
    },
    // 点击上一页  下一页，跳转到哪一页面时触发
    handleCurrentChangeI(val) {
      this.queryParamsI.pageNum = val
      // 重新查询
      this.getlistInventoryLogForPage()
    },
    // 翻译生产厂家
    producterFormatter(row) {
      let name = ''
      this.producterOptions.filter(item => {
        if (parseInt(item.producterId) === parseInt(row.producterId)) {
          name = item.producterName
        }
      })
      return name
    },
    // 翻译药品类型
    medicinesTypeFormatter(row) {
      return this.selectDictLabel(this.medicinesTypeOptions, row.medicinesType)
    },
    // 翻译处方类型
    prescriptionTypeFormatter(row) {
      return this.selectDictLabel(this.prescriptionTypeOptions, row.prescriptionType)
    },
    },
      watch:{
    'queryParams.medicinesName':{
        handler(newVal,OldVal){
            this.queryParams.pageNum = 1
            this.getMedicinesList()
        }
    },
    'queryParams.medicinesType':{
        handler(newVal,OldVal){
            this.queryParams.pageNum = 1
            this.getMedicinesList()
        }
    },
    'queryParams.prescriptionType':{
        handler(newVal,OldVal){
            this.queryParams.pageNum = 1
            this.getMedicinesList()
        }
    },
    'queryParams.producterId':{
        handler(newVal,OldVal){
            this.queryParams.pageNum = 1
            this.getMedicinesList()
        }
    },
    'queryParams.status':{
        handler(newVal,OldVal){
            this.queryParams.pageNum = 1
            this.getMedicinesList()
        }
    },
    'queryParams.keywords':{
        handler(newVal,OldVal){
            this.queryParams.pageNum = 1
            this.getMedicinesList()
        }
    },
    'queryParamsI.purchaseId':{
        handler(newVal,OldVal){
            this.queryParamsI.pageNum = 1
            this.getlistInventoryLogForPage()
        }
    },
    'queryParamsI.medicinesName':{
        handler(newVal,OldVal){
            this.queryParamsI.pageNum = 1
            this.getlistInventoryLogForPage()
        }
    },
     'dateRange':{
        handler(newVal,OldVal){
            this.queryParamsI.pageNum = 1
            this.getlistInventoryLogForPage()
        }
    },
  }
 }
</script>
